import { keyframes } from '@emotion/react';
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';

import { Box, Stack } from '@mui/material';

import { IAction } from 'state/action';
import { INestedMessage, highlightMessage, messagesStatusState } from 'state/chat';
import { IMessageElement } from 'state/element';
import { settingsState } from 'state/settings';

import Author, { authorBoxWidth } from './authorDeepexi';
// import Buttons from './buttons';
import MessageContent from './content';
import wakeupIcon from 'assets/wakeup.gif'
import thinkingIcon from 'assets/thinking_2.gif'
// import thinkingIcon from 'assets/thinking.gif'

// import DetailsButton from './detailsButton';
// import Messages from './messages';
// import UploadButton from './uploadButton';

interface Props {
  message: INestedMessage;
  elements: IMessageElement[];
  actions: IAction[];
  indent: number;
  showAvatar?: boolean;
  showBorder?: boolean;
  isRunning?: boolean;
  isLast?: boolean;
  setRandom: any;
  random: any
}

// Uses yellow[500] with 50% opacity
const flash = keyframes`
  from {
    background-color: transparent;
  }
  25% {
    background-color: rgba(255, 173, 51, 0.5);
  }
  to {
    background-color: transparent;
  }
`;

const Message = ({
  message,
  elements,
  actions,
  indent,
  showAvatar,
  showBorder,
  isRunning,
  isLast,
  setRandom,
  random
}: Props) => {
  const appSettings = useRecoilValue(settingsState);
  const highlightedMessage = useRecoilValue(highlightMessage);
  const messagesStatus = useRecoilValue(messagesStatusState);
  const [showDetails, setShowDetails] = useState(appSettings.expandAll);

  useEffect(() => {
    setShowDetails(appSettings.expandAll);
  }, [appSettings.expandAll]);

  if (appSettings.hideCot && indent) {
    return null;
  }

  return (
    <Box
      sx={{
        color: 'text.primary',
        backgroundColor: 'transparent'
      }}
      className="message"
    >
      <Box
        sx={{
          boxSizing: 'border-box',
          mx: 'auto',
          maxWidth: '68rem',
          display: 'flex',
          flexDirection: 'column',
          position: 'relative',
        }}
      >
        <Stack
          id={`message-${message.id}`}
          ml={indent ? `${indent * (authorBoxWidth + 16)}px` : 0}
          sx={{
            py: 2,
            paddingTop: '10px',
            paddingBottom: '10px',
            borderBottom: (theme) =>
              showBorder ? `1px solid ${theme.palette.divider}` : 'none',
            animation:
              message.id && highlightedMessage === message.id
                ? `1s ease-in-out 0.03s ${flash}`
                : 'none'
          }}
        >
          <Author message={message} show={showAvatar} >
            <Stack color="#CACACA" fontSize={14}  flexGrow={1} spacing={1} width="fit-content">
            {/* sx={{width: "fit-content"}} */}
              <MessageContent
                authorIsUser={message.authorIsUser}
                elements={elements}
                id={message.id}
                content={message.content}
                language={message.language}
                isRunning={isRunning}
                isLast={isLast}
                setRandom={setRandom}
                random={random}
                type={message.type}
                // isRendering={!message.stopRendering}
              />
              {/* <DetailsButton
                message={message}
                opened={showDetails}
                onClick={() => setShowDetails(!showDetails)}
                loading={isRunning}
              /> */}
              {/* {!isRunning && isLast && message.waitForAnswer && (
                <UploadButton />
              )} */}
              {/* <Buttons message={message} actions={actions} /> */}
            </Stack>
          </Author>
          { isLast &&  <Box sx={
                {
                  textAlign: 'center',
                  fontSize: '28px',
                  opacity: 0.5,
                  color: 'white',

                }
              }>{ messagesStatus === 'awakened' || messagesStatus === 'inProgress' ?
              <Box sx={{
                display: "flex",
                flexDirection: 'column',
                alignItems: 'center'
              }}>
                <img src={wakeupIcon} height={100}></img>
                <span>语音识别中...</span>
              </Box>
              : ''  }
          </Box>
          }
          {isRunning && message.authorIsUser && (<Box sx={
                {
                  textAlign: 'center',
                  fontSize: '28px',
                  opacity: 0.5,
                  color: 'white',
                  display: "flex",
                  flexDirection: 'column',
                  alignItems: 'center'
                }
              }>
            <img src={thinkingIcon} height={100}></img>
                <span>思考中...</span>
          </Box>)}
        </Stack>
      </Box>
      {/* {message.subMessages && showDetails && (
        <Messages
          messages={message.subMessages}
          actions={actions}
          elements={elements}
          indent={indent + 1}
          isRunning={isRunning}
        />
      )} */}
    </Box>
  );
};

export default Message;
